<template>
	<view>
		<view style="display: flex;justify-content: space-around;height: 100upx;line-height: 100upx;background-color: #fff;">
			<view v-for="(item,index) in menus" :key='index' :class="{active: currentIndex === index}" @click="menusClick(index)">
				{{item}}
			</view>
		</view>
		<view v-if="total_num" style="text-align: center;background-color: #fff;height: 80upx;line-height: 80upx;">
			总计金额: {{total_num}}
		</view>
		<view class="uni-list">
				<block v-for="(item,index) in res" :key="index">
						<view class="uni-list-cell" hover-class="uni-list-cell-hover">
								<view class="uni-triplex-row">
										<view class="uni-triplex-left">
												<text class="uni-title uni-ellipsis" 
												style="font-size: 28upx;padding: 0;"> {{item.remark}}</text>
												<text class="uni-text" style="font-size: 24upx;">{{item.createtime}}</text>
										</view>
										<view class="uni-triplex-right" style="width: 160upx;">
												<view class="status" style="background: #04ab02;">{{item.num}}</view>
										</view>
								</view>
						</view>
				</block>
		</view>
		<view v-if="res.length == 0" style="padding-top: 300upx;">
			<image src="../../static/searchlist.png" mode="" style="display: block;margin: 0 auto;width: 240upx;height: 240upx;"></image>
			<view style="text-align: center;color: #999;">暂时没有任何记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid:'',
				res:{},
				total_num:'',
				menus:['拼团补贴','推广津贴','服务补贴'],
				currentIndex:0,
				income_type:3,
			}
		},
		onLoad:function(){
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});
		},
		methods: {
			setAjax(){
				var data = {
				    'openid':this.openid,
						'income_type':this.income_type,
				   }
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.new_income_list&app=1',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						this.res = res.data.list
						this.total_num = res.data.total_num
					},
					fail: () => {},
					complete: () => {}
				});
			},
			menusClick(index){
				this.currentIndex = index
				this.income_type = this.currentIndex + 3
				this.setAjax()
			}
		}
	}
</script>


<style>
	.status{width:100%;font-size:24upx;background:#e0e0e0;text-align:center;color:#fff;margin-top:21upx;}
	.active {border-bottom: 5upx solid #EB2E15;}
</style>
